<template>
  <div class="order">
    <Header title="我的订单"></Header>

    <!-- 查看物流弹框 -->
    <nut-action-sheet
      v-model:visible="visibleStatus.expressInfoDialog"
      title="物流信息"
    >
      <div>物流信息。。。。。。。。。</div>
    </nut-action-sheet>

    <!-- 确认收货弹框 -->
    <nut-action-sheet
      v-model:visible="visibleStatus.takeDeliveryDialog"
      title="确认收货"
    >
      <div class="orderInfoBox">
        <OrderInfoItem :order="selectedOrderData" />
        <nut-button type="primary" @click="takeDelivery">确认收货</nut-button>
      </div>
    </nut-action-sheet>

    <!-- 删除订单弹框 -->
    <nut-action-sheet
      v-model:visible="visibleStatus.deleteOrderDialog"
      title="删除订单"
    >
      <div class="orderInfoBox">
        <OrderInfoItem :order="selectedOrderData" />
        <nut-button type="primary" @click="deleteOrder">确定删除</nut-button>
      </div>
    </nut-action-sheet>

    <!-- 去支付弹框 -->
    <nut-action-sheet
      v-model:visible="visibleStatus.payOrderDialog"
      title="支付订单"
    >
      <div class="orderInfoBox">
        <OrderInfoItem :order="selectedOrderData" />
        <PaySelect
          @pay="payOrder"
          :confirmData="selectedOrderData"
          :loading="loadingStatus.pay"
        />
      </div>
    </nut-action-sheet>

    <!-- 导航 -->
    <OrderListHeader
      :navMenuActive="navMenuActive"
      @switchNavMenu="switchNavMenu"
    />

    <!-- 订单列表 -->
    <div class="orderList">
      <nut-infinite-loading
        v-model="infinityData.enabled"
        :has-more="infinityData.hasMore"
        @load-more="loadMoreData"
      >
         <nut-empty v-if="orderData.list.length == 0" description="  "></nut-empty>
        <div
          class="orderInfoBox"
          v-for="(order, orderIndex) in orderData.list"
          :key="orderIndex"
          @click="hideAllMoreBtnList"
        >
          <OrderInfoItem
            :order="order"
            @clickEvent="
              $router.push({
                path: '/order/detail',
                query: { orderId: order.id },
              })
            "
          />
          <OrderInfoOperateBtn :order="order" @btnClickEvent="btnClickEvent" />
        </div>
      </nut-infinite-loading>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

import OrderInfoItem from "./components/OrderInfoItem.vue";
import OrderInfoOperateBtn from "./components/OrderInfoOperateBtn.vue";
import OrderListHeader from "./components/OrderListHeader.vue";
import PaySelect from "@/views/order/confirm/components/PaySelect.vue";

// 显示状态
const visibleStatus = reactive({
  takeDeliveryDialog: false,
  deleteOrderDialog: false,
  expressInfoDialog: false,
  payOrderDialog: false,
});

// 按钮状态管理
const loadingStatus = reactive({
  pay: false,
});

// 导航切换
const navMenuActive = ref(0);
const switchNavMenu = (index, item) => {
  navMenuActive.value = parseInt(index);
  filterData.query.statusList = item.statusList;
  resetPageInfoAndOrderData();
};

// 更多按钮状态控制
const hideAllMoreBtnList = () => {
  orderData.list.forEach((order) => {
    order.moreMenuVisible = false;
  });
};
const showMoreBtnList = (order) => {
  hideAllMoreBtnList();
  order.moreMenuVisible = !order.moreMenuVisible;
};

// 滚动加载
const infinityData = reactive({
  hasMore: true,
  enabled: true,
});

// 检索分页
const filterData = reactive({
  // 初始化分页信息
  initPageInfo: {
    page: 1,
    pages: 0,
    pageSize: 10,
    total: 0,
  },
  // 分页信息
  pageInfo: {
    page: 1,
    pages: 0,
    pageSize: 10,
    total: 0,
  },
  // 初始化检索条件
  initQuery: {
    statusList: [],
  },
  // 检索条件
  query: {
    statusList: [],
  },
});

// 订单数据
const orderData = reactive({
  list: [],
});

// 追加列表数据
const refreshPageInfoAndAppendOrderData = (data) => {
  filterData.pageInfo = {
    page: data.current + 1,
    pages: data.pages,
    pageSize: data.size,
    total: data.total,
  };
  orderData.list.push(...data.records);
  infinityData.hasMore = data.current >= data.pages ? false : true;
  infinityData.enabled = false;
  hideAllMoreBtnList();
};

// 重新刷新数据
const resetPageInfoAndOrderData = () => {
  filterData.pageInfo = JSON.parse(JSON.stringify(filterData.initPageInfo));
  orderData.list = [];
  infinityData.hasMore = true;
  infinityData.enabled = false;
  loadMoreData();
  hideAllMoreBtnList();
};

// 请求数据
const loadMoreData = () => {
  proxy.$orderApi.order
    .listPage({
      memberId: proxy.$userUtils.getUserId(),
      page: filterData.pageInfo.page,
      pageSize: filterData.pageInfo.pageSize,
      ...filterData.query,
    })
    .then((res) => {
      refreshPageInfoAndAppendOrderData(res.data);
    })
    .catch((error) => {});
};

// 选中的订单和操作类型
const selectedOrderData = reactive({});

// 按钮事件
const btnClickEvent = (type, order) => {
  switch (type) {
    case "takeDelivery":
      Object.assign(selectedOrderData, order);
      visibleStatus.takeDeliveryDialog = true;
      break;
    case "deleteOrder":
      Object.assign(selectedOrderData, order);
      visibleStatus.deleteOrderDialog = true;
      break;
    case "payOrder":
      Object.assign(selectedOrderData, order);
      visibleStatus.payOrderDialog = true;
      break;
    case "showExpress":
      visibleStatus.expressInfoDialog = true;
      break;
    case "showMoreBtnList":
      showMoreBtnList(order);
      break;
    case "orderRefund":
      router.push({ path: "/order/refund", query: { orderId: order.id } });
      break;
    case "orderReturn":
      router.push({ path: "/order/return", query: { orderId: order.id } });
      break;
    case "orderRefundProcess":
      router.push({
        path: "/order/refund/process",
        query: { orderId: order.id },
      });
      break;
    default:
      break;
  }
};
 
// 确认收货
const takeDelivery = () => {
  proxy.$orderApi.order.takeDelivery(selectedOrderData.id).then((res) => {
    visibleStatus.takeDeliveryDialog = false;
    resetPageInfoAndOrderData();
  });
};

// 删除订单
const deleteOrder = () => {
  proxy.$orderApi.order.deleteOrder(selectedOrderData.id).then((res) => {
    visibleStatus.deleteOrderDialog = false;
    resetPageInfoAndOrderData();
  });
};

// 支付
const payOrder = (type) => {
  if (type == "2") {
    proxy.$orderApi.order
      .aliMobileWapPay(
        selectedOrderData.id,
        encodeURIComponent(
          "http://" + window.location.host + "/#/order/pay/success"
        )
      )
      .then((res) => {
        document.write(res.data);
      })
      .catch((error) => {});
  } else {
    proxy.$showToast.fail("该支付方式正在对接中");
  }
};

// 页面加载完毕
onMounted(() => {
  if (route.query.index != null) {
    switchNavMenu(route.query.index, { statusList: route.query.statusList });
  } else {
    loadMoreData();
  }
});
</script>

<style lang="less" scoped>
.order {
  .orderList {
    margin: 55px 5px 10px 5px;
  }
  .orderInfoBox {
    border-radius: 15px;
    background: #fff;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    .nut-button {
      width: 100%;
      margin: 20px 0px;
      border-radius: 10px;
      height: 40px;
    }
  }
}
</style>